<template>

  <!--grid-template-rows: repeat(2, 1fr);-->
  <div class="settings">
    <h3 class="heading">功能设置</h3>
    <ul class="setting-list"
        :style="{gridTemplateRows: 'repeat('+rows+', 1fr)'}">
      <setting-cell v-for="(setting,index) in settings.switchSetting"
                    :key="index+'setting'"
                    :setting="setting"
      ></setting-cell>
    </ul>
    <h3 class="heading">主题</h3>

    <ul class="setting-list"
        :style="{gridTemplateRows: 'repeat('+rows+', 1fr)'}">
      <setting-wider-cell
          :setting="settings.theme"
      ></setting-wider-cell>
    </ul>

    <h3 class="heading other-heading">其他</h3>

    <ul class="other-list"
        :style="{gridTemplateRows: 'repeat(1, 1fr)'}">
      <li class="other other1" @click="gotoUrl('http://volcreate.com/about-us')"><i class="iconfont icon-Aboutus"></i></li>
      <li class="other other2" @click="gotoUrl('http://c.volcreate.com')"><i class="iconfont icon-blog"></i></li>
      <li class="other other3" @click="gotoUrl('http://volcreate.com/daka')"><i class="iconfont icon-daka"></i></li>
    </ul>


  </div>
</template>

<script>
import SettingCell from "@/components/SettingCell";
import {mapState} from "vuex";
import SettingWiderCell from "@/components/SettingWiderCell";

export default {
  name: "Setting",
  components: {SettingWiderCell, SettingCell},
  computed: {
    ...mapState(['settings']),
    rows() {
      let len = Object.keys(this.settings).length / 3;
      return Math.ceil(len);
    }
  },
  methods: {
    gotoUrl(url) {
      window.open(url, "_blank");
    }
  }

}
</script>

<style lang="less">
.settings {

  margin: 25px;
  position: relative;
  padding: 0 15px;
  border: 1px solid transparent;

  .heading {
    opacity: 1;
    padding: 0 10px 0 10px;
    font-weight: 600;
    font-size: 18px;
  }

  .setting-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 15px;
    row-gap: 10px;
    padding: 0;
    margin: 10px 0 20px 0;
    list-style-type: none;
  }

  .other-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 15px;
    row-gap: 10px;
    padding: 0;
    margin: 30px 0 20px 0;
    list-style-type: none;

    .iconfont {
      font-size: 30px;
    }

    .other {
      cursor: pointer;
    }

    .other1 {
      grid-column-start: 2;
      grid-column-end: 3;
    }

    .other2 {
      grid-column-start: 3;
      grid-column-end: 4;
    }

    .other3 {
      grid-column-start: 4;
      grid-column-end: 5;
    }
  }

}

</style>